
<!DOCTYPE HTML><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0 minimal-ui"/>
<meta name="apple-mobile-web-app-capable" content="yes"/>
<meta name="apple-mobile-web-app-status-bar-style" content="black">

<link rel="apple-touch-icon-precomposed" sizes="114x114" href="images/splash/splash-icon.png">
<link rel="apple-touch-icon-precomposed" sizes="180x180" href="images/splash/splash-icon-big.png">
<link rel="apple-touch-startup-image" href="images/splash/splash-screen.png" 	media="screen and (max-device-width: 320px)" />  
<link rel="apple-touch-startup-image" href="images/splash/splash-screen@2x.png" media="(max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2)" /> 
<link rel="apple-touch-startup-image" href="images/splash/splash-screen-six.png" media="(device-width: 375px)">
<link rel="apple-touch-startup-image" href="images/splash/splash-screen-six-plus.png" media="(device-width: 414px)">
<link rel="apple-touch-startup-image" sizes="640x1096" href="images/splash/splash-screen@3x.png" />
<link rel="apple-touch-startup-image" sizes="1024x748" href="images/splash/splash-screen-ipad-landscape" media="screen and (min-device-width : 481px) and (max-device-width : 1024px) and (orientation : landscape)" />
<link rel="apple-touch-startup-image" sizes="768x1004" href="images/splash/splash-screen-ipad-portrait.png" media="screen and (min-device-width : 481px) and (max-device-width : 1024px) and (orientation : portrait)" />
<link rel="apple-touch-startup-image" sizes="1536x2008" href="images/splash/splash-screen-ipad-portrait-retina.png"   media="(device-width: 768px)	and (orientation: portrait)	and (-webkit-device-pixel-ratio: 2)"/>
<link rel="apple-touch-startup-image" sizes="1496x2048" href="images/splash/splash-screen-ipad-landscape-retina.png"   media="(device-width: 768px)	and (orientation: landscape)	and (-webkit-device-pixel-ratio: 2)"/>

<title>Epsilon Mobile Framework - Version 2.0</title>

<link href="styles/style.css"     		 rel="stylesheet" type="text/css">
<link href="styles/framework.css" 		 rel="stylesheet" type="text/css">
<link href="styles/owl.theme.css" 		 rel="stylesheet" type="text/css">
<link href="styles/swipebox.css"		 rel="stylesheet" type="text/css">
<link href="styles/font-awesome.css"	 rel="stylesheet" type="text/css">
<link href="styles/animate.css"			 rel="stylesheet" type="text/css">

<script type="text/javascript" src="scripts/jquery.js"></script>
<script type="text/javascript" src="scripts/jqueryui.js"></script>
<script type="text/javascript" src="scripts/framework.plugins.js"></script>
<script type="text/javascript" src="scripts/custom.js"></script>

</head>
<body> 

<div id="preloader">
	<div id="status">
    	<p class="center-text">
			Loading the content...
            <em>Loading depends on your connection speed!</em>
        </p>
    </div>
</div>
    
       
<div class="all-elements">
    <div class="snap-drawers">
        <!-- Left Sidebar -->
        <div class="snap-drawer snap-drawer-left">
            <a href="index.html"><i class="fa fa-home"></i>Home</a>
            <a href="page-features.html" class="selected-item"><i class="fa fa-cog"></i>Features</a>
            <a href="page-media.html"><i class="fa fa-picture-o"></i>Media</a>
            <a href="page-blog.html"><i class="fa fa-pencil"></i>Blog</a>
            <a href="contact.html"><i class="fa fa-envelope-o"></i>Contact</a>
            <a href="#"><i class="fa fa-facebook"></i>Like Us</a>
            <a href="#"><i class="fa fa-twitter"></i>Follow Us</a>
            <a href="#"><i class="fa fa-google-plus"></i>Follow us</a>
            <a href="#" class="show-share-bottom"><i class="fa fa-retweet"></i>Share</a>
            <a href="#" class="sidebar-close"><i class="fa fa-times"></i>Close</a>
        </div>
    </div>
    
    <div class="header">
        <a href="#" class="main-logo"></a>
        <a href="#" class="open-menu"><i class="fa fa-navicon"></i></a>
        <a href="#" class="open-call"><i class="fa fa-phone"></i></a>
        <a href="#" class="open-mail"><i class="fa fa-envelope-o"></i></a>
        <a href="page-features.html" class="open-back"><i class="fa fa-chevron-left"></i></a>
    </div> 
    
    <a href="#" class="footer-ball"><i class="fa fa-navicon"></i></a>
    
    <!-- Page Content-->
    <div id="content" class="snap-content">        
        <div class="header-clear"></div>
        <div class="content">
            <a class="back-button" href="page-features.html"><i class="fa fa-chevron-left"></i> Back to Features</a>
            
             <div class="container no-bottom">
                <h3>Others</h3>
                <p>
                    Features that are vital to any template, easy to use and copy paste code. You can just copy and paste these features
                    into boxes or into repsonsive boxes! 
                </p>
            </div>
            
            <div class="decoration"></div>
            
            <div class="container no-bottom">  
                <div class="one-third-responsive full-bottom">
                    <h3>Simple Buttons</h3>
                    <p>Pure CSS3 buttons made with just one line of code are awesome! Flat, minimal, and perfect!</p>
                    <a href="#" class="button button-red">Button</a>
                    <a href="#" class="button button-green">Button</a>
                    <a href="#" class="button button-blue">Button</a>
                    <a href="#" class="button button-magenta">Button</a>
                    <a href="#" class="button button-tea">Button</a>
                    <a href="#" class="button button-yellow">Button</a>
                    <a href="#" class="button button-orange">Button</a>
                    <a href="#" class="button button-light">Button</a>
                    <a href="#" class="button button-grey">Button</a>  
                    <a href="#" class="button button-dark">Button</a>  
                    <a href="#" class="button button-red">Button</a>
                    <a href="#" class="button button-green">Button</a>           
                </div>
                <div class="decoration hide-if-responsive"></div>
                <div class="one-third-responsive full-bottom">
                    <h3>3D Buttons</h3>
                    <p>Pure CSS3 buttons made with just one line of code are awesome! Flat, minimal, and perfect!</p>
                    <a href="#" class="button-3d button-red red-3d">Button</a>
                    <a href="#" class="button-3d button-green green-3d">Button</a>
                    <a href="#" class="button-3d button-blue blue-3d">Button</a>
                    <a href="#" class="button-3d button-magenta magenta-3d">Button</a>
                    <a href="#" class="button-3d button-tea tea-3d">Button</a>
                    <a href="#" class="button-3d button-yellow yellow-3d">Button</a>
                    <a href="#" class="button-3d button-orange orange-3d">Button</a>
                    <a href="#" class="button-3d button-light light-3d">Button</a>
                    <a href="#" class="button-3d button-grey grey-3d">Button</a>    
                    <a href="#" class="button-3d button-dark dark-3d">Button</a>  
                    <a href="#" class="button-3d button-red red-3d">Button</a>
                    <a href="#" class="button-3d button-green green-3d">Button</a> 
                </div>
                <div class="decoration hide-if-responsive"></div>
                <div class="one-third-responsive last-column full-bottom">
                    <h3>Font Awesome Buttons</h3>
                    <p>Pure CSS3 buttons made with just one line of code are awesome! Flat, minimal, and perfect!</p>
                    <a href="#" class="button button-red"><i class="fa fa-navicon"></i>Button</a>
                    <a href="#" class="button button-green"><i class="fa fa-life-saver"></i>Button</a>
                    <a href="#" class="button button-blue"><i class="fa fa-paw"></i>Button</a>
                    <a href="#" class="button button-magenta"><i class="fa fa-camera"></i>Button</a>
                    <a href="#" class="button button-tea"><i class="fa fa-cog"></i>Button</a>
                    <a href="#" class="button button-yellow"><i class="fa fa-picture-o"></i>Button</a>
                    <a href="#" class="button button-orange"><i class="fa fa-question"></i>Button</a>
                    <a href="#" class="button button-light"><i class="fa fa-exclamation"></i>Button</a>
                    <a href="#" class="button button-grey"><i class="fa fa-angle-right"></i>Button</a>         

                </div>
            </div>

            <div class="decoration"></div>

            <div class="one-half-responsive">
                <h3>Speach bubbles?</h3>
                <p>
                    A nice way of showing off a conversation maybe?
                    It's absolutely simple to create them and use them!
                </p>

                <em class="speach-left-title">John Doe says:</em>
                <p class="speach-left">This is just an awesome bubble! It's quite cute isn't it?</p>

                <div class="clear"></div>

                <em class="speach-right-title">Jane Doe replied:</em>
                <p class="speach-right blue-bubble">Yeap! It's awesome isn't it and it's not that hard to use! And they act like bubbles, only expanding to 75% of width!</p>

                <div class="clear"></div>  

                <em class="speach-left-title">John Doe says:</em>
                <p class="speach-left">Awesome stuff!</p> 

                <div class="clear"></div>

                <em class="speach-right-title">Jane Doe replied:</em>
                <p class="speach-right blue-bubble">Yeap! It's awesome isn't it and it's not that hard to use! And they act like bubbles, only expanding to 75% of width!</p>
            </div> 

            <div class="decoration hide-if-responsive"></div>

            <div class="one-half-responsive last-column">
                <h3>Speach bubbles?</h3>
                <p>
                    A nice way of showing off a conversation maybe?
                    It's absolutely simple to create them and use them!
                </p>

                <em class="speach-left-title">John Doe says:</em>
                <p class="speach-left">This is just an awesome bubble! It's quite cute isn't it?</p>

                <div class="clear"></div>

                <em class="speach-right-title">Jane Doe replied:</em>
                <p class="speach-right green-bubble">Yeap! It's awesome isn't it and it's not that hard to use! And they act like bubbles, only expanding to 75% of width!</p>

                <div class="clear"></div>  

                <em class="speach-left-title">John Doe says:</em>
                <p class="speach-left">Awesome stuff!</p> 

                <div class="clear"></div>

                <em class="speach-right-title">Jane Doe replied:</em>
                <p class="speach-right green-bubble">Yeap! It's awesome isn't it and it's not that hard to use! And they act like bubbles, only expanding to 75% of width!</p>
            </div> 

            <div class="decoration"></div>
            <div class="container no-bottom">
                <h4>Device detection</h4>
                <p>A simple way to detect devices! When visiting from a mobile, only the one detected will appear!</p>
                <div class="one-half-responsive">
                    <div class="android-detected">
                        <div class="detected-wrapper">
                            <img class="detected-image" src="images/detector/android.png" alt="img">
                            <h4>Get it on Google Play</h4>
                            <em>For your Android Device</em>
                            <p>
                                This is a demo box, included in the template, but you can detect Androids
                                and add whatever text or element appear for that platform only!
                            </p>
                            <a href="#" class="button center-button button-dark full-bottom detected-button">Button</a>
                        </div>
                    </div>
                    <div class="decoration hide-if-responsive"></div>
                    <div class="ipod-detected">
                        <div class="detected-wrapper">
                            <img class="detected-image" src="images/detector/appstore.png" alt="img">
                            <h4>Get it on the Appstore</h4>
                            <em>For your iPod Touch</em>
                            <p>
                                This is a demo box, included in the template, but you can detect Androids
                                and add whatever text or element appear for that platform only!
                            </p>
                            <a href="#" class="button center-button button-blue full-bottom detected-button">Button</a>
                        </div>
                    </div>
                </div>
                <div class="decoration hide-if-responsive"></div>
                <div class="one-half-responsive last-column">
                    <div class="ipad-detected">
                        <div class="detected-wrapper">
                            <img class="detected-image" src="images/detector/appstore.png" alt="img">
                            <h4>Get it on the Appstore</h4>
                            <em>For your iPad / iPad Mini</em>
                            <p>
                                This is a demo box, included in the template, but you can detect Androids
                                and add whatever text or element appear for that platform only!
                            </p>
                            <a href="#" class="button center-button button-red full-bottom detected-button">Button</a>
                        </div>
                    </div>
                    <div class="decoration hide-if-responsive"></div>
                    <div class="iphone-detected">
                        <div class="detected-wrapper">
                            <img class="detected-image" src="images/detector/appstore.png" alt="img">
                            <h4>Get it on the Appstore</h4>
                            <em>For your iPhone</em>
                            <p>
                                This is a demo box, included in the template, but you can detect Androids
                                and add whatever text or element appear for that platform only!
                            </p>
                            <a href="#" class="button center-button button-green full-bottom detected-button">Button</a>
                        </div>
                    </div>  
                </div>
            </div>            
            
            <div class="decoration"></div>
            
        </div>
        <!-- Page Footer-->
        <div class="footer">
            <p class="center-text">Copyright 2015. All rights reserved.</p>
            <div class="footer-socials half-bottom">
                <a href="#" class="footer-facebook"><i class="fa fa-facebook"></i></a>
                <a href="#" class="footer-twitter"><i class="fa fa-twitter"></i></a>
                <a href="#" class="footer-transparent"></a>
                <a href="#" class="footer-share show-share-bottom"><i class="fa fa-share-alt"></i></a>
                <a href="#" class="footer-up"><i class="fa fa-angle-up"></i></a>
            </div>
        </div>      
    </div>
    
    <div class="share-bottom">
        <h3>Share Page</h3>
        <div class="share-socials-bottom">
            <a href="">
                <i class="fa fa-facebook facebook-color"></i>
                Facebook
            </a>
            <a href="">
                <i class="fa fa-twitter twitter-color"></i>
                Twitter
            </a>
            <a href="">
                <i class="fa fa-google-plus google-color"></i>
                Google
            </a>

            <a href="">
                <i class="fa fa-pinterest-p pinterest-color"></i>
                Pinterest
            </a>
            <a href="sms:">
                <i class="fa fa-comment-o sms-color"></i>
                Text
            </a>
            <a href="">
                <i class="fa fa-envelope-o mail-color"></i>
                Email
            </a>
        </div>
        <a href="#" class="close-share-bottom">Close</a>
    </div>
    
</div>

</body>

